
<template>
    <div class="contentBox">
        <!-- <searchTop :isBottmNavigation="false"></searchTop> -->
        <banner @search="search" :bannerlist="bannerlist" @SelectType="SelectType"></banner>
        <list @load="load" :data="tableData"></list>
        <!-- <div class="pagination">
            <el-pagination background layout="prev, pager, next" :page-size="4" :pager-count="11" :total="1000" />
        </div> -->
    </div>
</template>
  
<script lang="ts" setup>

import { id } from "element-plus/es/locale";
import { ref, reactive, watch } from "vue";
import { useRoute } from "vue-router";
// import searchTop from "../../../components/searchTop.vue"; //搜索组件
import banner from "./banner.vue"
import list from "./list.vue"
import { ProductgetPlatFormTypeProductType, getFactoryCategory, merchantStoregetStore } from "../../../utils/api"
import { dataType } from "element-plus/es/components/table-v2/src/common";


const route = useRoute()
const platform_type_id = route.query.platform_type_id
const data= reactive({
    page:1
})
// 列表
const tableData = ref([])

// 分类 数据
const searchvalue=ref('')
let  bannerlist = reactive([
    {
        name: '产品分类',
        avtiveID: '',
        typelist:
            [{ id: 0, name: '电子' },
            { id: 1, name: '耳机配饰' },
            { id: 2, name: '箱包皮具' },
            { id: 3, name: '服装' },
            { id: 4, name: '玩具' },
            { id: 5, name: '美妆' },
            { id: 6, name: '能源' },
            { id: 7, name: '通信产品' },
            { id: 8, name: '餐饮生鲜' },]
    },
    {
        name: '开店时间',
        avtiveID: '',
        typelist:
            [{ id: '0,1', name: '小于1年' },
            { id: '1,2', name: '1~2年' },
            { id: '2,3', name: '2~3年' },
            { id: '3,4', name: '3~4年' },
            { id: '4,0', name: '4年以上' },
            ]
    },
    {
        name: '成交数量',
        avtiveID: '',
        typelist:
            [{ id: '0,5000', name: '0~5K' },
            { id: '5000,10000', name: '5k~1W' },
            { id: '10000,20000', name: '1w~2w' },
            { id: '20000,40000', name: '2W~4W' },
            { id: '40000', name: '4W以上' },
            ]
    }
])

getFactoryCategory({ platform_type_id }).then(res => {
    console.log(res, '找工厂分类');
    bannerlist[0].typelist = res.data.data
})


const SelectType = (obj: { index: number, id: number, jindex: number }) => {
    console.log(obj, '选择类型');
    let arr = bannerlist;
    if (arr[obj.index].avtiveID == String(obj.id)) {
        arr[obj.index].avtiveID = ''
    } else {
        arr[obj.index].avtiveID = String(obj.id);
    }
    bannerlist = arr;
    console.log(arr)
    getData({
    page: 1,
    limit: 4,
    search_key:  searchvalue.value,
    year:bannerlist[1].avtiveID,
    number:bannerlist[2].avtiveID,
    category_id: bannerlist[0].avtiveID
})

}


const search = (search_key: string) => {
    searchvalue.value=search_key
    getData({
    page:data.page,
    limit: 4,
    search_key:  searchvalue.value,
    year:bannerlist[1].avtiveID,
    number:bannerlist[2].avtiveID,
    category_id: bannerlist[0].avtiveID
})
    console.log(search_key, '--------');
}


type getDataParamsTsType = { page: number, limit: number, search_key: string, year: string, number: string, category_id: number | string }
const getDataParams = reactive<getDataParamsTsType>({
    page: data.page,
    limit: 4,
    search_key: searchvalue.value,
    year: '',
    number: '',
    category_id: ''
})

// get 数据
const getData = (getDataParams: getDataParamsTsType) => {
    merchantStoregetStore(getDataParams).then(res => {
        console.log(res, '品牌数据');
        if(data.page==1){
            tableData.value = res.data.data
        }else{
            tableData.value = tableData.value.concat(res.data.data) 
        }
    })
}


const load = () => {
    data.page ++ ;
    getData({ 
    page:data.page,
    limit: 4,
    search_key:  searchvalue.value,
    year:bannerlist[1].avtiveID,
    number:bannerlist[2].avtiveID,
    category_id: bannerlist[0].avtiveID 
})
    console.log('触底');

    // getData(1)
}

getData(getDataParams)


watch(getDataParams, (newValue, oldValue) => {
  console.log("newValue", newValue, "oldValue", oldValue);
});

</script>
  
  
<style scoped lang="less">
.contentBox {
    max-width: 1920px;
    margin: 0 auto;
    background: #f5f5f5;

    .pagination {
        padding: 0px 224px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
}
</style>
  